<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*.p2:nth-of-type(4){
				background-color: blue;
			}*/
			
		</style>
	</head>
	<body>
		 
		  
		  <p id="p1"> 我是p1  </p>
		    
		 
		  <p class="p2"> 我是p2 </p>
		  <p class="p2"> 我是p2 </p>
		  <p class="p2"> 我是p2 </p>
		  
		  <ul class="ul">
		  	<li>1</li>
		  	<li>2</li>
		  	<li>3</li>
		  </ul>
		  
		  <img  id="img" src="img/Koala.jpg"  />
		   
		  <input id="input01" type="text"  value="我是编辑框" />
		 
		  
	</body>

    <script type="text/javascript">
     //获取标签对象
      var p1 = document.getElementById("p1");
      //获取这个标签上面的文本
    /*  var p1Text= p1.innerText; 
       alert(p1Text);
      //修改
      p1.innerText="我要修改你~~";*/
//    p1.innerText="<p>修改</p>";
      p1.innerHTML="<p>修改</p>";
      //innerText会把所有内容当做文本输出，包括标签。
      //innerHTML会把文本中的标签字符，转化成html标签输出。所以可以用此动态生成标签。
      var p2 =document.getElementsByClassName("p2");//获得是所有class=p2的标签,数组
      var p2_01 = p2[0];//获取第一个标签    
      p2_01.innerText="修改p2";       
      
      //css选择器写法
      var p1_new = document.querySelector("#p1");
          p1_new.innerText="new p1";
      
      var p2_new = document.querySelector(".p2");//永远只能拿到第一个
          p2_new.innerText="new p2";
       
      var p2_new_02= document.querySelectorAll(".p2")[2];  //拿到的是所有class
          p2_new_02.innerText="新的p2";
       
       
      //如果, 相同标签但是class不同。属于同一级兄弟标签。之间会互相影响。
      //如上事例： 
      //如果前面有p标签，但是class不是p2，那么nth-child(数值就要加上前面p标签的个数)
      //如果结果这种BUG:使用一个容器将所有的class同名的标签包裹起来。
      document.querySelector(".p2:nth-child(3)").innerText="我是第3个" ;
      
      
      //以下显示正确
      document.querySelector(".ul>li:nth-child(2)").innerText="li2" ;
           

       //如何修改图片
     var img =document.querySelector("#img");
       //修改图片
       img.src="img/logo.png";
       //样式style也是标签的属性   
       img.style.width="200px";
       //css里面的中划线都要传化成首字母大写
       p1.style.backgroundColor="blue";
       
       
      //获取输入框上面的内容
      var input01= document.querySelector("#input01");
          //alert(input01.value);
          input01.value="用户名";
          //input01.type="password"; 
     
        //一旦不带var ，同时自己被执行了。那么就会变成全局变量。
 

    </script>	
</html>
